<template>
	<view class="device_name_layout">
		<view class="top">
			<view class="input-name">
				<view class="nameDevice">
					{{$t('nameDevice.name')}}
				</view>
				<input class="name" value="" 
					@input="changePwdContent" />
			</view>
		</view>

		<view class="confirm-btn" @click="confirm">
			{{$t('nameDevice.confirm')}}
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiSetDeviceName
	} from '../../api/device_api';
	import {
		onShow,
		onLoad,
		onUnload,
		
	} from "@dcloudio/uni-app";
	import {
		i18nTool
	} from '../../utils/i18en';

	var deviceName;
	var imei;
	var param = {

	};
	
	onLoad((e) => {
		uni.setNavigationBarTitle({
			title:i18nTool("nameDevice.navTitle")
		})
		let {
			data
		} = e;
		imei = data;
	})
	onUnload(()=>{
		
	})
	

	function changePwdContent(e) {
		deviceName = e.detail.value;
	}

	 function confirm() {
		if (deviceName == null) {
			uni.showToast({
				title: i18nTool('nameDevice.err'),
				icon: "none",
			})
			return;
		}
		uni.showLoading({
			title:"loading...",
			mask:true
		})
		let timer = setTimeout(()=>{
			uni.hideLoading()
			delayRequest();
			clearTimeout(timer);
		},3000)
		
	}
	
	async function delayRequest(){
		param.dvName = deviceName;
		param.imei = imei;
		let res = await apiSetDeviceName(param);
		uni.$emit("stepFour", true);
		uni.navigateTo({
			url: "/pages/add_device/set-device-head?data=" + imei
		})
	}
</script>

<style lang="scss" scoped>
	.device_name_layout {

		.top {
			padding: 60rpx 60rpx;
			display: flex;
			align-items: center;

			.input-name {
				
				width: 100%;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				border: 2rpx solid #BDBDBD;
				background-color: #fff;
				border-radius: 10rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: start;
				flex: 2;
				.nameDevice{
					margin-left: 10rpx;
					font-size: 28rpx;
					color: #666;
				}
				.name {
					margin-left: 8rpx;
					height: 100%;
					width: 75%;
					margin-right: 8rpx;
					
				}
			}
		}

		.confirm-btn {
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 60rpx;
			height: 80rpx;
			color: #fff;
			background-color: #53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);

		}
	}
</style>